Skip to content

fix(vue-query-devtools): only register cleanup after mount#10439

Open
semimikoh wants to merge 2 commits intoTanStack:mainfrom
semimikoh:fix/vue-query-devtools-ssr-unmount
Open

fix(vue-query-devtools): only register cleanup after mount#10439
semimikoh wants to merge 2 commits intoTanStack:mainfrom
semimikoh:fix/vue-query-devtools-ssr-unmount

Conversation

@semimikoh
Copy link
Copy Markdown
Contributor

@semimikoh semimikoh commented Apr 10, 2026 •
edited by coderabbitai bot
Loading

🎯 Changes

Fix SSR cleanup handling in @tanstack/vue-query-devtools by only registering devtools.unmount()
after devtools.mount() has actually run.

Previously, the Vue devtools wrapper registered cleanup in onScopeDispose() during setup, while
mount() only happened in onMounted(). In Vue SSR, onMounted() does not run on the server, but

This change ensures cleanup is only registered after mount in:

  • packages/vue-query-devtools/src/devtools.vue
  • packages/vue-query-devtools/src/devtoolsPanel.vue

A changeset was also added for @tanstack/vue-query-devtools.

Closes #10374

🚀 Release Impact

  • This change affects published code, and I have generated a [changeset](https://github.com/
    changesets/changesets/blob/main/docs/adding-a-changeset.md).
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Bug Fixes

  • Fixed Vue SSR devtools cleanup where shutdown operations are now properly registered after component mount, resolving lifecycle timing issues.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 10, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5c0922e8-1930-467d-81de-0654ec370620

📥 Commits

Reviewing files that changed from the base of the PR and between 125067c and 3148494.

📒 Files selected for processing (3)
  • .changeset/khaki-coats-divide.md
  • packages/vue-query-devtools/src/devtools.vue
  • packages/vue-query-devtools/src/devtoolsPanel.vue
📝 Walkthrough

Walkthrough

Fixes Vue SSR devtools cleanup by relocating unmount registration from top-level component scope to inside the onMounted hook via onScopeDispose, ensuring cleanup only executes after mount initialization. Includes changelog entry marking a patch release.

Changes

Cohort / File(s) Summary
Changelog
.changeset/khaki-coats-divide.md		 New Changesets entry documenting patch release for @tanstack/vue-query-devtools with SSR unmount fix.
DevTools Lifecycle Fix
packages/vue-query-devtools/src/devtools.vue, packages/vue-query-devtools/src/devtoolsPanel.vue		 Moved onScopeDispose(() => devtools.unmount()) registration from top-level component script into onMounted hook, ensuring cleanup only registers after mount executes. Prevents premature unmount during SSR context cleanup.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Hoppy hops the lifecycle now,
Mount must come before we bow,
SSR cleanup flows just right,
No more errors in the night!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly and concisely describes the main change: fixing cleanup registration to occur only after mount in vue-query-devtools.
Description check ✅ Passed The PR description covers the main changes, explains the motivation (SSR cleanup issue), and indicates a changeset was added; however, the description is incomplete with truncated text.
Linked Issues check ✅ Passed The code changes directly address issue #10374 by ensuring devtools.unmount() is only registered after devtools.mount() runs, preventing cleanup from executing during SSR.
Out of Scope Changes check ✅ Passed All changes are scoped to fixing the SSR cleanup handling in vue-query-devtools and adding the required changeset; no extraneous changes detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link
Copy Markdown

nx-cloud bot commented Apr 10, 2026 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 3148494

Command Status Duration Result
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1s View ↗
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 1m 1s View ↗

☁️ Nx Cloud last updated this comment at 2026-04-10 01:09:30 UTC

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 10, 2026

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10439

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10439

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10439

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10439

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10439

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10439

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10439

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10439

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10439

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10439

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10439

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10439

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10439

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10439

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10439

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10439

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10439

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10439

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10439

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10439

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10439

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10439

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10439

commit: 3148494

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@Ari4ka Ari4ka Ari4ka approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

package: vue-query-devtools

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[vue-query] Devtools is not mounted with @vue/server-renderer@3.5.31 while SSR

2 participants

@semimikoh @Ari4ka